import React, { PureComponent } from 'react'
import {
  LoginWrapper,
  LoginBox,
  Input,
  Button
} from './style.js'
import { connect } from 'react-redux'
import { Redirect } from 'react-router'
import { login } from './store/actionCreators.js'
class Login extends PureComponent {
  render() {
    const { loginStatus } = this.props
    if (!loginStatus) {
      return (
        <LoginWrapper>
          <LoginBox>
            <Input placeholder='账户' innerRef={input => this.account = input}/>
            <Input placeholder='密码' type='password' innerRef={input => this.password = input}/>
            <Button onClick={() => this.props.loginInfo(this.account, this.password)}>登录</Button>
          </LoginBox>
        </LoginWrapper>
      )
    } else {
      return <Redirect to='/'/>
    }
  }
}
const mapStateToProps = state => ({
  loginStatus: state.getIn(['login', 'login'])
})
const mapDispatchToProps = dispatch => ({
  loginInfo(account, password) {
    dispatch(login({
      account: account.value,
      password: password.value
    }))
  }
})
export default connect(mapStateToProps, mapDispatchToProps)(Login)